<template>
  <div class="song">
    <img :src="pic" alt="" id="img">
    <div class="top">
      <div class="title">
        <h1>{{this.$route.query.name}}</h1>
        <h2>{{this.$route.query.songname}}</h2>
      </div>
          
           <div class="text">
             <div v-if="(lary1.length!=0)">
               <ul class="lyric"  >
        <li :class="{each:true}" v-for="(item,index) in lary1" :key="index"  >
         
          <div class="sss"><p :id="index" ref="ly" class="p" @click="scro(index)"> {{item}}</p></div>
        
          </li>
        </ul>    
             </div>
              <p v-else class="lay">暂无歌词内容</p>
          </div>


           <div class="img">
             <img :src="pic||this.$route.query.putiur" alt=""  >
           </div>
    </div>
    <div class="audio" >
         <audio controls="controls" loop autoplay ref="audio" :src="music1"  id="audio">  
      </audio> 
    
     </div>
  </div>
</template>

<script>

export default {
    data(){
        return {
            song:'',
            msg:'',
            songid:'',
            lary:[],
            lary1:[],
            lrcObj:{},
            music1:null,
            song:'' ,
            pic:'',
            id:'',
            id1:'',
            time:[]

        }
    },
    
    methods:{
       vkey(){
        var id=this.$route.query.indexid
        this.axios.get(`http://iecoxe.top:5000/v1/kuwo/song?rid=${this.id||id}
        `).then(res=>{
          // console.log(res);
        this.music1=res.data.url
  
        }).catch(err=>{
        console.log(err);
        })
    },
      getliyl(){
        var id=this.$route.query.indexid
        this.axios.get(`http://iecoxe.top:5000/v1/kuwo/lyric?rid=${this.id||id}`)
    
        .then(res=>{
          // console.log(res);
          var time;
        this.lary=res.data.lyric_str.split('[').slice(1)
         this.lary.forEach((item,index) => {
          let arr = item.split(']');
         let m = parseInt(arr[0].split(':')[0])
         let s = parseInt(arr[0].split(':')[1])
         time=s
         arr[0] = m*60 + s;
         if (arr[1] != '\n') { 
             this.lrcObj[arr[0]] = arr[1];
         }
         this.lary1=this.lrcObj
         });
          
         setTimeout(()=>{
            var time=document.querySelectorAll('.p')
           var  music=document.getElementById('audio')
              var num=0
         music.addEventListener('timeupdate',function(){
          var currtime=parseInt(this.currentTime)
          if(document.getElementById(currtime)){
              for(var i=0;i<time.length;i++){
                time[i].style.color='#000'
                time[i].style.fontSize=16+'px'
                 time[i].style.fontWeight=500
              }
             document.getElementById(currtime).style.color='#fff'
              document.getElementById(currtime).style.fontSize=20+'px'
               document.getElementById(currtime).style.fontWeight=800
                document.getElementById(currtime).style. transition=1+'s'
              if(time[num].id==currtime){
                   for(var i=0;i< document.querySelectorAll('.sss').length;i++){
                 document.querySelectorAll('.sss')[i].style.top=-30*num+'px'
                  document.querySelectorAll('.sss')[i].style.transition=1+'s'
                 }
                num++
                if( this.duration){
               document.querySelectorAll('.sss')[i].style.top=0+'px'
            }
              }
          
           }
           
         })
         })
        
        }
        ).catch(err=>{
          console.log(err);
        })
      },
      scro(i){

          this.$refs.audio.currentTime=i

      },

    
    },
    created(){
       
       this.pic=this.$route.query.pic
       console.log(this.pic);
      this.id=this.$route.query.id
      this.songid=this.$route.query.songid
      this.song=this.$route.query.song
     this.getliyl() 
       
      this.vkey()
      
     
      this.music1
      this.scro()
      console.log(this.$refs.audio)
  

    },
    watch:{
      $route(){
         this.vkey()
        this.getliyl()
        this.$route.query.piutiur
       
        
      }
    }
   
   
}
</script>
<style lang="scss" scoped>
#img{
  position: absolute;
  
    filter:blur(205px);
    z-index: -1;
    // background: #333;
    width: 100%;
    // height: 720px;
    // top: 250px;
    left: 0px;
    bottom: 0;
    background-size: cover;
}

.title{
  width: 200px;
  margin-left: 200px;
position: absolute;
margin-top: 150px;

}
.song::before{
   content: "";
    position: absolute;
    filter:blur(205px);
    z-index: -1;
    // background: #333;
    width: 100%;
    // height: 720px;
    top: 250px;
    left: 0px;
    bottom: 0;
    background-size: cover;
}
.song{
  position: absolute;
  bottom: 0;
  // height: 100%;
  width: 100%;
  // background-color: #fff;
 .top{
   display: flex;
   width: 1400px;
   margin: 0 auto;
  //  border: 1px solid;
    justify-content: space-between;
    height: 550px;
  .img{
    img{
    display: inline-block;
  border: 50px solid;
border-radius: 50%;
background-color: #333;
animation: rotate 4s linear infinite; 
       margin: 0 auto;
       width: 200px;
      height: 200px;
      
    }
   
  }
  .text{
    width: 1400px;
    margin: 0 auto;
    position: relative;
     
    
    
  }
     .lyric {
        width: 1400px;
        height: 480px;
        position: absolute;
        // top: 150px;
        text-align: center;
        margin: 0 auto;
        overflow: auto;
        color: #000;
        font-size: 16px;
        font-weight: normal;
        .each {
        height: 30px;
        line-height: 30px;
        text-align: center;
        }
        
        &::-webkit-scrollbar {
            width: 3px;
            height: 1px;
            display: none;
        }
        // 滑块部分
        &::-webkit-scrollbar-thumb {
            background-color: #eee;
        }
        // 轨道部分
        &::-webkit-scrollbar-track {
            background-color: #333;
        }
    }

.sss{
  position: relative;
  top: 0px;
  overflow: auto;
}
   
  
 }
 .audio{
     width: 1400px;
      margin: 0 auto;
      height: 100px;
      audio{
        width: 1400px;
      
    
    }
   }
  
 
}
</style>